<template>
    <div class="message-container">
        <div class="message-tabs">
            <div class="tab-item" @click="activeTab = 'time'">专业回答</div>
        </div>
        <div class="message-content-time" v-show="activeTab === 'time'">
            <div class="hint-message">
                <div v-if="qaList.length === 0" class="loading-question">
                    <span>{{
                        sendLoading === true ? "问题推理中..." : "等待提交问题" }}</span>
                </div>
                <div>
                    <div id="answer">
                        <div class="all-msg-content-box">
                            <div class="message-content">
                                <div v-for="(qa, index) in qaList" :key="index" class="qa-content">
                                    <div class="q-content">{{ index + 1 + "." + qa.question }}</div>
                                    <div class="a-content">
                                        <template v-if="qa.answer.loading">
                                            <div class="loading">分析中<i class="fas fa-spinner fa-spin"></i></div>
                                        </template>
                                        <template v-else>
                                            <!-- 图表类型 -->
                                            <div v-if="qa.answer.type === 'plot'" :id="qa.answer.chartId"
                                                class="chart-container" style="height: 420px;">
                                            </div>
                                            <!-- 表格类型 -->
                                            <div v-else-if="qa.answer.type === 'dataframe'" class="table-container">
                                                <table class="data-table">
                                                    <thead>
                                                        <tr>
                                                            <th v-for="(header, idx) in qa.answer.content.columns"
                                                                :key="idx">
                                                                {{ header }}
                                                            </th>
                                                        </tr>
                                                    </thead>
                                                    <tbody>
                                                        <tr v-for="(row, rowIdx) in qa.answer.content.data"
                                                            :key="rowIdx">
                                                            <td v-for="(value, colIdx) in row" :key="colIdx">
                                                                {{ typeof value === 'number' ?
                                                                    value.toLocaleString('zh-CN', {
                                                                        maximumFractionDigits: 2
                                                                    }) : value }}
                                                            </td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>

                                            <!-- 数字对象类型 -->
                                            <div v-else-if="qa.answer.type === 'number'" class="number-content">
                                                <div v-for="(value, key) in qa.answer.content" :key="key"
                                                    class="number-item">
                                                    <span class="number-label">{{ key }}：</span>
                                                    <span class="number-value">{{ typeof value === 'number' ?
                                                        value.toLocaleString('zh-CN', { maximumFractionDigits: 4 }) :
                                                        value
                                                    }}</span>
                                                </div>
                                            </div>

                                            <!-- 字符串类型 -->
                                            <div v-else-if="qa.answer.type === 'string'" class="string-content">
                                                {{ qa.answer.formattedContent }}
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </div>

                            <!-- 见解内容 -->
                            <div v-if="insight" class="insight-content" v-html="insight"></div>
                        </div>
                    </div>

                </div>

            </div>

        </div>

    </div>
</template>

<script src="./chatmessage.js"></script>

<style src="./chatmessage.css" scoped></style>